<template>
   <!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/Hcontract">货主合同审批管理</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>货主合同审批</el-breadcrumb-item>
  </el-breadcrumb>
</div>
    <div align="center" style="margin-top: 50px" >
<h2>货主合同审批</h2><br>
<table>
   <tbody>
<tr>
    <td>
 <el-form-item label="合同标题：" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.contractTitle" style="width: 300px;height: 40px;" :disabled="true"
        placeholder="请输入合同标题" clearable />
      </el-form-item>
  
    </td>
    <td>
      <el-form-item label="货主单位" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.unit" style="width: 300px;height: 40px;" :disabled="true"
        placeholder="请输入货主单位" clearable />
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="货主负责人：" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.personCharge" style="width: 300px;height: 40px;" :disabled="true"
        placeholder="货主负责人：" clearable />
      </el-form-item>
    </td>
    <td>
      <el-form-item label="线路" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-select v-model="form.lineName" placeholder="线路" style="width: 300px" :disabled="true">
                            <el-option v-for="item in line" :label="item" :value="item" />
      </el-select> 
     </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="吨运价" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.tonPrice" style="width: 300px;height: 40px;" :disabled="true"
        placeholder="吨运价" clearable />
      </el-form-item>
    </td>
    <td>
      <el-form-item label="包车条件吨位" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.ton" style="width: 300px;height: 40px;" :disabled="true"
        placeholder="请输入包车条件吨位" clearable />
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="包车金额：" style="font-size: 20px;float: right;">
        <el-input v-model="form.charteredBusPrice" style="width: 300px;height: 40px;" :disabled="true"
        placeholder="请输入包车金额" clearable />
      </el-form-item>
    </td>
   <td>
      <el-form-item label="经办人" style="font-size: 20px;float: right;">
        <el-input v-model="form.attn" style="width: 300px;height: 40px;" :disabled="true"
        placeholder="请输入经办人" clearable />
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="签订时间"   style="font-size: 20px;float: right;">
        <el-date-picker v-model="form.dateofSigning" type="date"  value-format="YYYY-MM-DD"
        placeholder="请选择签订时间" clearable  style="width: 300px;height: 40px;" :disabled="true"/>
      </el-form-item>
    </td>
      <td>
      <el-form-item label="合同金额" style="font-size: 20px;float: right;">
        <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;" :disabled="true"
placeholder="合同金额" clearable />
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <el-form-item label="合同标的或项目说明" 
        style="font-size: 20px;width: 970px;height: 100px;float: right;" >
      <el-input v-model="form.contractNote" type="textarea" style="font-size: 20px;width: 970px;height: 100px;" :disabled="true"></el-input>
      </el-form-item>
      
    </td>
  </tr>
  <tr>
    <td colspan="2">
    
      <el-form-item label="合同主要条款/边更条款" 
        style="font-size: 20px;width: 970px;height: 100px;float: right;">
      <el-input v-model="form.contractTerms" type="textarea" style="font-size: 20px;width: 970px;height: 100px;" :disabled="true"></el-input>
      </el-form-item>
    </td>
  </tr>
  <tr >
    <td style="font-size: 20px;">合同文本(附件)：</td>
    <td>
        <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="http://10.223.8.15:8000/hwrite/api/Contract/Upfile"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
    :on-success="handleSuccess"
    :disabled="true"
  >
    <el-button type="primary" :disabled="true">选取文件</el-button>
  
  </el-upload>
      <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span> 
    </td>
  </tr>
</tbody>
</table>

 <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="formadd"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
  >
  <el-form-item label="审批备注" prop="approvalNotes" >
      <el-input v-model="formadd.approvalNotes" type="textarea" />
    </el-form-item>
      <el-form-item label="转批人" prop="subgrantor">
      <el-select v-model="formadd.subgrantor" placeholder="转批人" style="width: 300px">
                            <el-option v-for="item in username" :label="item.name" :value="item.name" />
                        </el-select> 
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="Submit" 
        style="width: 150px;height: 50px;">通过并转批</el-button>
        <el-button  @click="Cancel" style="width: 150px;height: 50px;"
        >拒绝</el-button>
        <el-button type="success" @click="onSubmit" 
        style="width: 150px;height: 50px;">通过并终止审批</el-button>
    </el-form-item>
</el-form>
</div>
</template>
<script setup lang='ts'>
 import axios  from 'axios';
 import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ref, reactive, onMounted,watch } from 'vue'; 
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
//变量
const form=reactive({
    contractId:route.query.ContractId,
    contractTitle:'',//合同标题
     unit:'',//单位
    personCharge:'',//负责人
    lineId:1,//线路
    lineName:'',//线路名称  
    tonPrice:'',//吨价
    ton:'',//吨数
    charteredBusPrice:'',//包车金额
    attn:'',//经办人
    dateofSigning:'',//签订日期
    contractAmount:'',//合同金额
    contractNote:'',//合同标的或项目说明
    contractTerms:'',//合同主要条款/变更条款
    contractText:'',//合同文本
     contractNumber:'',//合同编号
     ccontractStatus:0,//合同状态
    contractClassification:1,//合同分类
    updatedBy:'admin',//更新人
    updatedDate:new Date(),//更新时间
    createdBy:'admin',//创建人
    createdDate:new Date(),//创建时间
    deletedBy:'admin',//删除人
    deletedDate:new Date(),//删除时间
})
//上传文件
const handleSuccess=(any:any)=>{
console.log(any);
form.contractText=any;
}
//线路
const line = ref([]);
const getLine = () => {
    axios.get("/hread/api/ContractRead/Getlines").then((res) => {
        line.value = res.data.list.map((o) => o.lineName);
    });
};
//反填
const backfill=()=>{
    axios.get('/hread/api/ContractRead/BackfillTshowContract', {
        params: {
          ContractId: route.query.ContractId
        }
      }).then(res => {
  form.contractTitle=res.data.data.contractTitle
      form.unit=res.data.data.unit
      form.personCharge=res.data.data.personCharge
      form.lineId=res.data.data.lineId
      form.tonPrice=res.data.data.tonPrice
      form.ton=res.data.data.ton
      form.lineName=res.data.data.lineName
      form.charteredBusPrice=res.data.data.charteredBusPrice
      form.attn=res.data.data.attn
      form.dateofSigning=res.data.data.dateofSigning
      form.contractAmount=res.data.data.contractAmount
      form.contractNote=res.data.data.contractNote
      form.contractTerms=res.data.data.contractTerms
      form.contractText=res.data.data.contractText
      form.contractNumber=res.data.data.contractNumber
      form.ccontractStatus=res.data.data.ccontractStatus
      form.contractClassification=res.data.data.contractClassification
      form.updatedBy=res.data.data.updatedBy
      form.updatedDate=res.data.data.updatedDate
      form.createdBy=res.data.data.createdBy
      form.createdDate=res.data.data.createdDate
      form.deletedBy=res.data.data.deletedBy
      form.deletedDate=res.data.data.deletedDate
     localStorage.setItem('contractText',res.data.data.contractText)
     kk()
   
    })
}
//用户信息查询
  const forms: any = reactive({
    phone: '',
    login_flag: -1,
    name: '',
    no:'',
    pageIndex: 1,
    pageSize: 5,
    totalPage: 0,
    totalCount: 0,
  })
    //用户列表
const UserInfoData: any = ref([])
  const username=ref([])
  const getUserInfoList = () => {
  
    axios.get('http://1.117.93.87:8000/rbacdu/api/User/userShow', {
      params: {
        phone: forms.phone,
        login_flag: forms.login_flag,
        name: forms.name,
        no: forms.no,
        pageIndex: forms.pageIndex,
        pageSize: forms.pageSize,
      }
    }).then(res=>{
      console.log(res);
      UserInfoData.value = res.data.data.list;
      forms.totalPage = res.data.data.pageCount;
      forms.totalCount = res.data.data.totalCount;
      username.value = UserInfoData.value.filter(o => o.name != localStorage.getItem('username'));
          
    }).catch(err=>{
      console.log(err);
      
    })    
  }

const fileList=ref()
const kk=()=>{
 const fileLists = ref([
  {
        name: localStorage.getItem('contractText'),
        url:'/hread/wwwroot/file/'+localStorage.getItem('contractText'),
 }
])
fileList.value=fileLists.value
console.log(fileList.value)
}
//审批表变量
const formadd=reactive({
    approvalResult:'',
    approvalNotes:'',
    approver:'',
    contractId:'',
    subgrantor:''
})
//同意
const onSubmit = () => {
  let hh={
    approvalResult:"同意",
    approvalNotes:formadd.approvalNotes,
    approver:localStorage.getItem('username'),
    contractId:route.query.ContractId,
    subgrantor:formadd.subgrantor,
}
 axios.post('/hwrite/api/Contract/CrerateAppro',hh).then(res=>{
        if(res.data.data>0){
         ElMessage({
           message: '已通过',
          type: 'success',
        })
        router.push('/Hcontract')
       }else{
         ElMessage.error('修改失败')
        }
    })
}
//转批
const Submit=()=>{
  let hh={
    approvalResult:"同意并转批",
    approvalNotes:formadd.approvalNotes,
    approver:localStorage.getItem('username'),
    contractId:route.query.ContractId,
    subgrantor:formadd.subgrantor,
}
 axios.post('/hwrite/api/Contract/CrerateAppro',hh).then(res=>{
        if(res.data.data>0){
         ElMessage({
           message: '已通过并转批',
          type: 'success',
        })
        router.push('/Hcontract')
       }else{
         ElMessage.error('修改失败')
        }
    })
}
//拒绝
const Cancel=()=>{
let hh={
    approvalResult:"拒绝",
    approvalNotes:formadd.approvalNotes,
    approver:localStorage.getItem('username'),
    contractId:route.query.ContractId,
    subgrantor:formadd.subgrantor,
  }
console.log(hh) 
axios.post('/hwrite/api/Contract/CrerateAppro',hh).then(res=>{
        if(res.data.data>0){
         ElMessage({
           message: '已拒绝',
          type: 'success',
        })
        router.push('/Hcontract')
       }else{
         ElMessage.error('修改失败')
        }
    })

}
// const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
//    alert(1)
// console.log(file, uploadFiles)
// }

// const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
//     alert(2)
//   console.log(uploadFile)
 
// }

// const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
//     alert(3)
//     ElMessage.warning(
//     `The limit is 3, you selected ${files.length} files this time, add up to ${
//       files.length + uploadFiles.length
//     } totally`
//   )
// }

// const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
//     alert(4)
//   return ElMessageBox.confirm(
//     `确定删除吗 ${uploadFile.name} ?`
//   ).then(
//     () => true,
//     () => false
//   )
// }
//钩子函数
onMounted(()=>{
    backfill()//反填货主合同信息
  getLine()//获取线路
  getUserInfoList()//获取用户信息

}
)
</script>


